<template>
  <el-container>
    <el-header>
      <Menu></Menu>
    </el-header>
    <el-main>
      <div style="width:auto;height:auto;text-align:left">
        <div class="zz">
          <img
            src="../assets/提问.png"
            alt
            class="questionlogo"
          />
          <label style="font-size:35px;color:gray">提问</label>
          <el-input
            type="textarea"
            placeholder="完整描述你的问题"
            v-model="text.content.textarea"
            maxlength="50"
            show-word-limit
            style="margin-top:20px;font-size:30px"
          ></el-input>

          <div>
            <el-input
              type="textarea"
              placeholder="请对问题进行详细描述，以便获得更准确地答案"
              v-model="text.content.textarea2"
              show-word-limit
              style="margin-top:40px;font-size:20px;"
              :autosize="{ minRows: 10}"
            ></el-input>
          </div>

          <el-upload
            ref="upload"
            class="upload-demo"
            drag
            action="https://virtserver.swaggerhub.com/young-zy/Forum/0.0.1/thread"
            multiple
            :auto-upload="false"
            :data="text"
            :headers="header"
            :file-list='list'
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
              <div
                class="el-upload__tip"
                slot="tip"
              >(只能上传jpg/png文件，且不超过500kb)</div>
            </div>
          </el-upload>
          <el-select
            v-model="value"
            filterable
            placeholder="请选择问题类别"
            class="chooser"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button
            type="primary"
            class="btn"
            @click="upload"
          >
            上传
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Menu from '../components/Menu.vue'

export default {
  name: 'question',
  components: {
    Menu
  },
  data () {
    return {
      list: [],
      text: {
        headers: {
          token: localStorage.getItem('tokenvalue')
        },
        title: '提问',
        content: {
          textarea: '',
          textarea2: ''
        }
      },
      header: {
        token: localStorage.getItem('tokenvalue')
      },
      value: '',
      img: [],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ]
    }
  },
  methods: {
    upload () {
      // var zz=this.$refs.upload.submit();
      // console.log(zz)
      var result = this.$http.post('https://virtserver.swaggerhub.com/young-zy/Forum/0.0.1/thread', this.text)
      console.log(result)
      // this.$refs.upload.submit()
      // console.log(this.list)
    }
  }
}
</script>

<style lang="less" scoped>
.el-header {
  position: fixed;
  padding: 0;
}
.el-main {
  padding-top: 70px;
}
.questionlogo {
  width: 50px;
  height: 50px;
  /* position: absolute;
  transform: translate(-370px, 70px); */
}

.zz {
  margin-top: 30px;
  height: 1400px;
  margin-left: 30%;
  margin-right: 30%;
}

.upload-demo {
  margin-top: 30px;
  height: 200px;
  width: 690px;
}

.btn {
  position: absolute;
  transform: translate(500px, -80px);
}

.chooser {
  position: absolute;
  transform: translate(160%, -200px);
  width: 240px;
}
</style>
